<template>
	<view class="container">
		<view class="main">
			<view style="margin-top: 30rpx;">
				<image style="width: 400rpx;height: 160rpx"
				:src="lesseeModel.coverUrl || 'https://ky.railshj.cn/protocol/icon/images/mine/mine_avatar.png'" mode="aspectFill"></image>
			</view>
			<view style="width: 100%;height: 40rpx;text-align: center;font-size: 32rpx;font-weight: bold;margin-top: 20rpx;">{{lesseeModel.name}}</view>
			<view v-if="couponModel.types == '1'" style="display: flex;flex-direction: column;align-items: center;">
				<view style="font-size: 40rpx;color: #fe9808;margin-top: 30rpx;">{{couponModel.name}}</view>
				<view style="color: #999;font-size: 24rpx;;margin-top: 4rpx;">免费兑换</view>
			</view>
			<view v-if="couponModel.types == '2'" style="display: flex;flex-direction: column;align-items: center;">
				<view style="font-size: 40rpx;color: #fe9808;margin-top: 30rpx;">{{$count.mul(couponModel.money, 1)}}元立减券</view>
				<view style="color: #999;font-size: 24rpx;;margin-top: 4rpx;">无门槛</view>
			</view>
			<view v-if="couponModel.types == '4'" style="display: flex;flex-direction: column;align-items: center;">
				<view style="font-size: 40rpx;color: #fe9808;margin-top: 30rpx;">{{$count.mul(couponModel.money, 1)}}元满减券</view>
				<view style="color: #999;font-size: 24rpx;;margin-top: 4rpx;">（满{{$count.mul(couponModel.fullMoney, 1)}}元可用）</view>
			</view>
			<view v-if="couponModel.code" style="width: 300rpx;height: 70rpx;text-align: center;line-height: 70rpx;font-size: 28rpx;color: #FFF; background-color: #fe9808;margin-top: 30rpx;">
				<text v-if="couponModel.status == 'wait_use'">待使用</text>
				<text v-if="couponModel.status == 'has_use'">已使用</text>
				<text v-if="couponModel.status == 'due'">已过期</text>
			</view>
			<view v-else style="width: 300rpx;height: 70rpx;text-align: center;line-height: 70rpx;font-size: 28rpx;color: #FFF; background-color: #00b800;margin-top: 30rpx;"
			@click="operateAction('getCoupon', couponModel)">立即领取</view>
			
			<view v-if="couponModel.code" style="width: 630rpx;display: flex;flex-direction: column;align-items: center;">
				<image :src="'data:image/png;base64,' + base64_code" mode="" style="width: 400rpx;height: 400rpx;"></image>
				<view style="margin-top: 12rpx;font-size: 30rpx;font-weight: bold;">核销码ID：{{ couponModel.code }}</view>
				<view style="margin-top: 20rpx;color: #fe9808;font-size: 26rpx;">请到店出示二维码进行核销</view>
			</view>
			<!-- 商家信息 -->
			<view style="width: 630rpx;padding: 0 30rpx;margin: 30rpx 0;display: flex;flex-direction: column;border-top: 2rpx solid #eee; margin-top: 40rpx;">
				<view @click="operateAction('goLesseeDetail', {})"
				style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 30rpx 0;">
					<view style="color: #999;font-weight: bold;flex-shrink: 0;">店铺名称：</view>
					<view style="color: #999;">{{ lesseeModel.name }} ></view>
				</view>
				<view class="phone" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-top: 1rpx solid #eeeeee;padding: 30rpx 0;">
					<view style="color: #999;font-weight: bold;">联系电话：</view>
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view class="">{{ lesseeModel.phone }}</view>
						<view @click="operateAction('call', lesseeModel)"
						style="width: 100rpx;height: 50rpx;margin-left: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28rpx;border-radius: 4rpx;border: 1rpx solid #DD4949;color: #DD4949;">
							拨打
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-top: 1rpx solid #eeeeee;padding: 30rpx 0;">
					<view style="color: #999;font-weight: bold;flex-shrink: 0;">地址：</view>
					<view style="color: #999;">{{ lesseeModel.addr }}></view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { common } from '@/api/common.js'
	import { lessee } from '@/api/lessee.js'
	import { privilege } from '@/api/privilege.js'
	import { coupon } from '@/api/coupon.js'
	export default{
		components: {},
		data() {
			return {
				content: '',
				base64_code: '',
				lesseeId: {},
				lesseeModel: {},
				couponId: '',
				privilegeId: '',
				couponModel: {},
				clientInfo: {}
			}
		},
		onLoad() {
			this.clientInfo = this.$storage.getStorageDataSync(this.$store.state.clientInfo)
			if(this.$Route.query.lesseeId){
				this.lesseeId = this.$Route.query.lesseeId
				this.getLesseeInfo()
			}
			
			if(this.$Route.query.couponId){
				this.couponId = this.$Route.query.couponId
				this.getCouponInfo()
			}else if(this.$Route.query.privilegeId){
				this.privilegeId = this.$Route.query.privilegeId
				this.getPrivilegeInfo()
			}
		},
		methods:{
			getLesseeInfo() {
				lessee.getItemById({
					obj_id: this.lesseeId
				}).then(res => {
					if (res.data.code == 10000) {
						this.lesseeModel = res.data.data
					}
				})
			},
			getPrivilegeInfo() {
				privilege.getItemById({
					obj_id: this.privilegeId
				}).then(res => {
					if (res.data.code == 10000) {
						this.couponModel = res.data.data
					}
				})
			},
			getCouponInfo() {
				coupon.getItemById({
					obj_id: this.couponId
				}).then(res => {
					if (res.data.code == 10000) {
						this.couponModel = res.data.data
						var content = {
							code: this.couponModel.code
						}
						this.createCode(content)
					}
				})
			},
			getDataList() {
				lessee.operateActionGet('/merchant/shop/', {}).then(res => {
					if (res.data.code == 10000) {
						
					}
				})
			},
			createCode(content) {
				common.createCode({
					content: this.clientInfo.baseUrl + '?clientname='+this.$store.state.clientname+'&qrcode=' + content.code + '&CHN=coupon'
				}).then(res => {
					if (res.data.code == 10000) {
						this.base64_code = res.data.data
					}
				})
			},
			operateAction(scene, val) {
				console.log('事件', scene, val)
				switch (scene) {
					case 'call':
						uni.makePhoneCall({
							phoneNumber: val.phone, // 电话号码
							success: function () {
							  console.log('拨打电话成功');
							},
							fail: function () {
							  console.log('拨打电话失败');
							}
						})
						break;
					case 'getCoupon':
						privilege.getCoupon({
							privilegeId: val.id
						}).then(res => {
							if(res.data.code == 10000){
								this.couponModel = res.data.data
								uni.showToast({
									title: '领券成功',
									icon: 'success'
								})
								var content = {
									code: this.couponModel.code
								}
								this.createCode(content)
							}
						})
						break;
					case 'goLesseeDetail':
						this.$Router.push({
							name: 'lesseeDetail',
							params: {
								lesseeId: this.lesseeId
							}
						})
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		background-color: #fe9808;
		height: 100vh;
		padding-top: 30rpx;
	}
	.main{
		background-color: #FFF;
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 12rpx;
	}
</style>